﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="theme-color">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>分享家</title>
    <link rel="stylesheet" type="text/css" href="./lib/css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./lib/css/mui.css"/>
    <link rel="stylesheet" href="./css/util.css">
    <link rel="stylesheet" href="./css/find.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="http://at.alicdn.com/t/font_371407_7omis3wrfr7tx1or.js"></script>
</head>
<body>
<main id="main">
    <div id="banner" style="background-image: url('image/index/index_banner.jpg')"></div>
    <div id="search-btn" :class="{'hidden':!searchBtn}">
        <div class="bg-mid" @click="goPage('html/select_city.html')">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-search-o"></use>
            </svg>
            <span>搜索房源</span>
        </div>
    </div>
    <section class="line-transverse" style="position: relative">
        <div class="city-house">
            <div class="city-title look-more">
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuxian"></use>
                    </svg>
                    <span class="city-name" v-cloak>热门城市</span>
                </div>
                <div class="des" @click="goPage('html/select_city.html')">
                    查看更多
                    <svg class="icon">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </div>
            </div>
            <div class="city-group">
                <div class="city-item" @click="reqCityHouseList('110100')"
                     style="background-image: url('image/city_find/city-beijing.png')">
                    北京
                </div>
                <div class="city-item" @click="reqCityHouseList('310000')"
                     style="background-image: url('image/city_find/city-shanghai.png')">
                    上海
                </div>
                <div class="city-item" @click="reqCityHouseList('510100')"
                     style="background-image: url('image/city_find/city-chengdu.png')">
                    成都
                </div>
                <div class="city-item" @click="reqCityHouseList('500100')"
                     style="background-image: url('image/city_find/city-chongqing.png')">
                    重庆
                </div>
                <div class="city-item" @click="reqCityHouseList('610100')"
                     style="background-image: url('image/city_find/city-xian.png')">
                    西安
                </div>
            </div>
        </div>
    </section>
    <section :class="{'line-transverse':i<city.length-1}" style="position: relative" v-for="(v, i) of city">
        <div class="city-house">
            <div class="city-title look-more" @click="reqCityHouseList(v.city.city_id)">
                <div>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuxian"></use>
                    </svg>
                    <span class="city-name" v-cloak>{{v.city.name}}</span>
                </div>
                <div class="des">
                    查看更多
                    <svg class="icon">
                        <use xlink:href="#icon-you"></use>
                    </svg>
                </div>
            </div>
            <div class="city-house-group">
                <div class="city-house-item" :class="{'ont-item':v.list.length===1}" v-for="house of v.list" @click="goPage('./html/house_res_detail.html',{
                    data:{
                        id:house.id
                    }
                })">
                    <div class="house-img" :data-id="house.id"
                         :style="'background-image: url('+fxiImg(house.img)+')'"></div>
                    <div>
                        <div class="house-des">
                            <span class="house-title" v-cloak>{{house.title}} </span>
                            <span class="money" v-cloak><span class="dollar">￥</span>{{house.price_low}}</span>
                        </div>
                        <div class="house-address">
                            <span v-cloak>单间出租/可住{{house.people}}人-已定{{house.day}}晚</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<nav id="tab-nav">
    <a onclick="location.reload()">
        <svg v-show="!tab1" class="icon" aria-hidden="true">
            <use xlink:href="#icon-find-o"></use>
        </svg>
        <svg v-show="tab1" class="icon active" aria-hidden="true">
            <use xlink:href="#icon-find"></use>
        </svg>
        <span class="tab-label" :class="{active:tab1}">发现</span>
    </a>
    <a @click="openF('html/indent.html',2)">
        <svg v-show="!tab2" class="icon" aria-hidden="true">
            <use xlink:href="#icon-order-o"></use>
        </svg>
        <svg v-show="tab2" class="icon active" aria-hidden="true">
            <use xlink:href="#icon-order"></use>
        </svg>
        <span class="tab-label" :class="{active:tab2}">订单</span>
    </a>
    <a @click="openF('html/msg.html',3)">
        <svg v-show="!tab3" class="icon" aria-hidden="true">
            <use xlink:href="#icon-message-o"></use>
        </svg>
        <svg v-show="tab3" class="icon active" aria-hidden="true">
            <use xlink:href="#icon-message"></use>
        </svg>
        <span class="tab-label" :class="{active:tab3}">消息</span>
    </a>
    <a @click="openF('html/me.html',4)">
        <svg v-show="!tab4" class="icon" aria-hidden="true">
            <use xlink:href="#icon-user-o"></use>
        </svg>
        <svg v-show="tab4" class="icon active" aria-hidden="true">
            <use xlink:href="#icon-user"></use>
        </svg>
        <span class="tab-label" :class="{active:tab4}">我</span>
    </a>
</nav>



<script type="text/javascript" src="./lib/js/babel-polyfill.js"></script>
<script type="text/javascript" src="./lib/js/vue.js"></script>
<script type="text/javascript" src="./lib/js/mui.js"></script>
<script type="text/javascript" src="./lib/js/jquery.js"></script>
<script type="text/javascript" src="./script/util.js"></script>
<script src="./script/find.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
</body>
</html>